<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <link rel="stylesheet" href="../assets/notice/notice.css">
    <script src="../assets/notice/notice.js"></script>
    <script src="../assets/axios/axios.js"></script>
    <script>
        // 1、前端页面代码错误【 请求前错误，请求后错误 】
        // 2、网络通信错误
        // 3、服务器运行错误

        // 4、服务器响应数据不合理-业务逻辑错误
        function sendAjaxFun() {
            //  JS 同步代码的尝试执行和错误捕获
            try {
                // asdasdasd
                axios.get("http://127.0.0.1:3000/api/users", {
                    // `timeout` 指定请求超时的毫秒数。
                    // 如果请求时间超过 `timeout` 的值，则请求会被中断
                    // timeout: 2000, // 默认值是 `0` (永不超时)
                })
                    .then(function (response) {
                        // asdasdasda
                        console.log(response)
                    })
                    .catch(function (error) {
                        console.log(error);
                        // console.log( Object.getPrototypeOf(error) );
                        // console.log(axios.AxiosError)
                        // console.log(error instanceof Error);
                        // console.log(error instanceof axios.AxiosError);
                        if (error instanceof axios.AxiosError) {
                            // ajax 异步请求未正常结束
                            // console.log(error.code);
                            if (error.code == "ECONNABORTED") {
                                notice({
                                    icon: "warning",
                                    title: "请求超时,请稍后重试"
                                })
                            } else if (error.code == "ETIMEDOUT" || error.code == "ERR_NETWORK") {
                                notice({
                                    icon: "error",
                                    title: "网络异常,请检查网络连接"
                                })
                            } else if (error.response) {
                                switch (error.response.status) {
                                    case 401:
                                    case 403:
                                        notice({
                                            icon: "error",
                                            title: "未授权"
                                        })
                                        break;
                                    case 404:
                                        notice({
                                            icon: "error",
                                            title: "您所访问的资源不存在"
                                        })
                                        break;
                                    case 500:
                                        notice({
                                            icon: "error",
                                            title: "服务器异常,请联系管理员"
                                        })
                                        break;
                                    default:
                                        notice({
                                            icon: "error",
                                            title: "服务器忙,请稍后重试"
                                        })
                                        break;
                                }
                            }

                        } else {
                            // ajax 异步请求正常结束，但JS数据处理的代码出现问题
                            notice({
                                icon: "error",
                                title: "运行错误,请联系管理员"
                            })
                        }
                    })
            } catch (error) {
                notice({
                    icon: "error",
                    title: "运行错误,请联系管理员"
                })
            }
        }
    </script>
</head>

<body>
    <input type="button" value="ajax-error" onclick="sendAjaxFun()">
</body>

</html>